<!-- 批量导入订单 -->
<template>
  <div>
    <el-card>
      <span>批量导入订单</span>
      <el-divider></el-divider>
      <el-steps :active="active">
        <el-step
          title="选择导入文件"
          description="文件只能是Excel表格，别搞错了哦。"
        >
        </el-step>
        <el-step
          title="选择需要导入的数据"
          description="有重复数据的话可以勾选导入"
        >
        </el-step>
        <el-step title="导入完成" description="订单导入完成"> </el-step>
      </el-steps>

      <!-- 154.8.182.144 -->
      <!-- action="http://154.8.182.144:9999/sys/order/import" -->
      <div v-if="active == 0">
        <el-upload
          class="upload-demo"
          drag
          :show-file-list="false"
          action="http://154.8.182.144:9999/sys/order/import"
          multiple
          align="center"
          :on-success="handleImport"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传xlsx文件</div>
        </el-upload>
      </div>
      <div v-if="active == 1">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="getTitleName('导入数据')" name="first">
            <el-table ref="singleTable" :data="orderList" style="width: 100%">
              <el-table-column type="index" label="#" width="50">
              </el-table-column>
              <el-table-column prop="orderPlatform" label=" 平 台" width="80">
              </el-table-column>
              <el-table-column prop="orderNumber" label="订单编号" width="180">
              </el-table-column>
              <el-table-column prop="deliveryDate" label="发货日" width="180">
                <template slot-scope="scope">
                  <span
                    v-if="
                      scope.row.deliveryDate != null &&
                      scope.row.deliveryDate != undefined &&
                      scope.row.deliveryDate != '' &&
                      scope.row.deliveryDate.split('').length > 0
                    "
                  >
                    {{ scope.row.deliveryDate.split(" ")[0] }}</span
                  >
                  <span v-else> {{ scope.row.deliveryDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ageing"
                label="时效"
                width="180"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="remark" label="备注" width="180">
              </el-table-column>
              <el-table-column prop="" label="租期" width="180">
                <template slot-scope="scope">
                  <strong style="font-size: 14px">
                    {{
                      startAndEndTime(scope.row.startTime, scope.row.endTime)
                    }}</strong
                  >
                  <br />
                  <strong
                    v-if="scope.row.duration >= 90"
                    style="color: #f56c6c"
                  >
                    {{ durationAndMoney(scope.row.duration, scope.row.money) }}
                  </strong>
                  <strong v-else>
                    {{ durationAndMoney(scope.row.duration, scope.row.money) }}
                  </strong>
                </template>
              </el-table-column>
              <el-table-column prop="userName" label="姓名" width="90">
              </el-table-column>
              <el-table-column prop="phone" label="电话" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click.native.prevent="deleteRow(scope.$index, orderList)"
                    >删 除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="getTitleName('重复数据')" name="second">
            <el-table
              ref="singleTable"
              :data="ExistOrderList"
              style="width: 100%"
              tooltip-effect="dark"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column type="index" label="#" width="50">
              </el-table-column>
              <el-table-column prop="orderPlatform" label=" 平 台" width="80">
              </el-table-column>
              <el-table-column prop="orderNumber" label="订单编号" width="360">
                <template slot-scope="scope">
                  <span>
                    <el-link
                      :underline="false"
                      class="btn-copy"
                      :data-clipboard-text="scope.row.orderNumber"
                      @click="copyMessage()"
                      >{{ scope.row.orderNumber }}</el-link
                    >
                  </span>
                </template>
              </el-table-column>

              <el-table-column prop="deliveryDate" label="发货日" width="180">
                <template slot-scope="scope">
                  <span
                    v-if="
                      scope.row.deliveryDate != null &&
                      scope.row.deliveryDate != undefined &&
                      scope.row.deliveryDate != '' &&
                      scope.row.deliveryDate.split('').length > 0
                    "
                  >
                    {{ scope.row.deliveryDate.split(" ")[0] }}</span
                  >
                  <span v-else> {{ scope.row.deliveryDate }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="ageing" label="时效" width="180">
              </el-table-column>

              <el-table-column prop="remark" label="备注" width="180">
              </el-table-column>
              <el-table-column prop="" label="租期" width="180">
                <template slot-scope="scope">
                  <strong style="font-size: 14px">
                    {{
                      startAndEndTime(scope.row.startTime, scope.row.endTime)
                    }}</strong
                  >
                  <br />
                  <strong
                    v-if="scope.row.duration >= 90"
                    style="color: #f56c6c"
                  >
                    {{ durationAndMoney(scope.row.duration, scope.row.money) }}
                  </strong>
                  <strong v-else>
                    {{ durationAndMoney(scope.row.duration, scope.row.money) }}
                  </strong>
                </template>
              </el-table-column>
              <el-table-column prop="userName" label="姓名" width="90">
              </el-table-column>
              <el-table-column prop="phone" label="电话" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click.native.prevent="
                      deleteRow(scope.$index, ExistOrderList)
                    "
                    >删 除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>

        <div align="right" style="margin-top: 20px">
          <!-- 确定导入 -->
          <el-button type="primary" @click="addOrders">确定导入数据</el-button>

          <!-- 取消导入 -->
          <el-button @click="closeImportData">取消导入数据</el-button>
        </div>
      </div>
      <div v-if="active == 2" align="center" style="margin: 200px">
        <el-button type="primary" icon="el-icon-check" round @click="go"
          >订单导入完成，快去处理吧</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import orderApi from "@/api/order";
import ClipboardJS from "clipboard"; // 复制

export default {
  data() {
    return {
      active: 0,
      activeName: "first",

      orderList: [],
      ExistOrderList: [],

      existNum: 0,
      orderNum: 0,
    };
  },

  mounted() {
    new ClipboardJS(".btn-copy"); // 复制文本
  },

  methods: {
    handleImport(response) {
      // 成功;

      if (response.code == 20000) {
        // 成功
        this.$message.success("导入成功");
        this.orderList = response.data.data;
        if (response.data.data != null || response.data.data != undefined) {
          this.orderNum = response.data.data.length;
        }
        this.ExistOrderList = response.data.ExistData;

        if (
          response.data.ExistData != null ||
          response.data.ExistData != undefined
        ) {
          this.existNum = response.data.ExistData.length;
        }

        this.active = 1;
      } else if (response.code == 25023) {
        this.$message({
          message: response.message,
          type: "warning",
        });
        this.copyCFList = response.data;
        this.drawer = true;
      } else {
        this.$message.error(response.message);
      }
    },

    getTitleName(str) {
      if (str === "导入数据") {
        return str + `(${this.orderNum})`;
      } else if (str === "重复数据") {
        return str + `(${this.existNum})`;
      }
    },

    // 租期框计算
    startAndEndTime(startTime, endTime) {
      if (
        (startTime != null || startTime != undefined) &&
        (endTime != null || endTime != undefined)
      )
        return startTime.substring(0, 10) + "~" + endTime.substring(0, 10);
      else return null;
    },
    durationAndMoney(duration, money) {
      if (
        (duration != null || duration != undefined) &&
        (money != null || money != undefined)
      )
        return duration + "天," + "￥" + money;
    },

    deleteRow(index, rows) {
      rows.splice(index, 1);
    },

    // 导入数据
    addOrders() {
      var orders = [];
      if (this.orderList.length > 0) {
        this.orderList.forEach((item) => {
          orders.push(item);
        });
      }

      if (
        this.multipleSelection != null ||
        this.multipleSelection != undefined
      ) {
        this.multipleSelection.forEach((item) => {
          orders.push(item);
        });
      }

      if (orders.length > 0) {
        this.$confirm("确定要导入这些数据吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            orderApi.addOders(orders).then((response) => {
              this.$message({
                type: "success",
                message: "导入成功!",
              });
              // 弹出确认框
              this.active = 2;
            });
          })
          .catch(() => {});
      }
    },

    // 取消导入数据
    closeImportData() {
      this.$confirm("确定取消导入数据吗，点击确定后导入的数据将清空", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "取消导入!",
          });
          // 弹出确认框
          this.orderList = [];
          this.ExistOrderList = [];
          this.active = 0;
        })
        .catch(() => {});
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    go() {
      this.$router.push({ path: "/order/inOrder" });
    },

    // 点击复制提示
    copyMessage() {
      this.$message({
        type: "success",
        message: "复制成功",
      });
    },
  },
};
</script>

<style scoped></style>
